<template>
  <div class="my_vote">
    <head-top head-title="我的投票" goBack="true"></head-top>
    <div class="no-data" style="padding-top:250px; text-align: center; font-size:20px"
         v-show="flag && supVote === '' && satVote === '' && canVote === ''">
      您暂无投票数据
    </div>
    <div class="vote_all">
      <!--选举投票结果-->
      <div class="vote_box">
        <div class="box_list" v-if="canVote">
          <span>选举投票</span>
        </div>
        <div class="list_li" v-for="(cans,index) in canVote" :key="'c'+index">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{cans.title}}</p>
                <span>{{cans.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>{{cans.content}}</p>
                <span @click="$router.push('/home/VillageDetail/'+cans.article_id)">查看详细内容</span>
              </div>
            </div>
          </div>
          <div class="joinbtn">
            <button @click="$router.push('/my/MyVoteResult/'+'can'+'/'+cans.voteId)">
              <span>查看投票结果</span>
            </button>
          </div>
        </div>
      </div>
      <!--事物投票结果-->
      <div class="vote_box">
        <div class="box_list" v-if="supVote">
          <span>事物投票</span>
        </div>
        <div class="list_li" v-for="(sups,index2) in supVote" :key="'s'+index2">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{sups.title}}</p>
                <span>{{sups.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>{{sups.content}}</p>
                <span @click="$router.push('/home/VillageDetail/'+sups.article_id)">查看详细内容</span>
              </div>
            </div>
          </div>
          <div class="joinbtn">
            <button @click="$router.push('/my/MyVoteResult/'+'sup'+'/'+sups.voteId)">
              <span>查看投票结果</span>
            </button>
          </div>
        </div>
      </div>
      <!--满意度投票结果-->
      <div class="vote_box">
        <div class="box_list" v-if="satVote">
          <span>满意度投票</span>
        </div>
        <div class="list_li" v-for="(sats,index3) in satVote" :key="'t'+index3">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{sats.title}}</p>
                <span>{{sats.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>{{sats.content}}</p>
                <span @click="$router.push('/home/VillageDetail/'+sats.satId)">查看详细内容</span>
              </div>
            </div>
          </div>
          <div class="joinbtn">
            <button @click="$router.push('/my/MyVoteResult/'+'sat'+'/'+sats.satId)">
              <span>查看投票结果</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .my_vote {
    padding-top: 40px;
    width: 100%;
    .vote_all {
      .vote_box {
        width: 100%;
        .box_list {
          width: 100%;
          height: 40px;
          background: #f2f2f2;
          span {
            font-size: 14px;
            color: #656b79;
            line-height: 40px;
            margin-left: 10px;
          }
        }
        .list_li {
          padding: 10px;
          border-bottom: 1px solid #f2f2f2;
          .introduces {
            width: 100%;
            /*height: 70px;*/
            .pcontent_word {
              float: left;
              width: 100%;
              margin-left: 5px;
              position: relative;
              .word_top {
                margin-top: 10px;
                height: 22px;
                p {
                  font-size: 15px;
                  float: left;
                  width: 168px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 10px;
                  color: #666;
                  margin-right: 6px;
                }
              }
              .word_bottom {
                height: 22px;
                line-height: 22px;
                p {
                  font-size: 13px;
                  float: left;
                  color: #666666;
                  width: 180px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 12px;
                  color: #0078de;
                  margin-right: 6px;
                }
              }
              img {
                width: 90px;
                position: absolute;
                right: 10px;
                top: 0;
              }
            }
          }
          .joinbtn {
            text-align: center;
            button {
              width: 100%;
              border: 1px solid #0078de;
              background: #fff;
              outline: none;
              margin-top: 10px;
              span {
                line-height: 40px;
                font-size: 15px;
                color: #0078de;
              }
            }
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import { loadUserId } from '../../common/js/cache.js'
  import qs from 'qs'

  export default {
    data () {
      return {
        supVote: [], // 事物投票
        canVote: [], // 选举投票
        satVote: [], // 满意度投票
        flag: false // 标识符用于精致暂无数据显示
      }
    },
    // 页面缓存写法
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'MyVoteResult') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this.getMyVote()
      }
      this.$route.meta.isBack = false
    },
    // created () {
    //   this.getMyVote()
    // },
    methods: {
      getMyVote () {
        const url = `${commonUrl.apihost}index.php/home/my_vote/getMyVote`
        const data = {
          userId: loadUserId()
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.supVote = res.data.data.sup // 事物投票
            this.canVote = res.data.data.can // 选举投票
            this.satVote = res.data.data.sat // 满意度投票
            if (this.supVote === '' || this.canVote === '' || this.satVote === '') {
              this.flag = true
            }
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>
